<template>
  <div>
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
      <a class="navbar-brand" href="#">测试结果</a>
    </nav>
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-bottom">
      <span class="navbar-text" style="color:lightgrey">成都终端管制室 创新工作室 2021</span>
      <ul class="navbar-nav">
        <li class="nav-item">
          <button type="button" class="btn btn-dark" @click="goNext">下一步</button>
        </li>
      </ul>
    </nav>
    <h5>霍兰德测试结果</h5>

    <!-- holland -->
    <div class="container-fluid" style="margin-top:0px;margin-bottom:60px">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>-</th>
            <th v-for="item in asix_x" :key="item.id">
              {{item.letter}}:
              {{item.title}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,key) in content" :key="item.id">
            <td v-if="key<asix_y.length">
              {{asix_y[key].index}}:
              {{asix_y[key].title}}
            </td>
            <td v-if="key==asix_y.length">总分</td>
            <td v-for="score in item" :key="score.id">{{score}}</td>
          </tr>
        </tbody>
      </table>
      <!-- <p style="color:lightgrey;font-size:0.8em">成都终端管制室 创新工作室 2021</p> -->
    </div>
    <h5>贝尔宾团队角色测试结果</h5>
    <!-- belbin -->
    <div class="container-fluid" style="margin-top:20px;margin-bottom:80px;text-align:left;">
      <table class="table">
        <tbody>
          <tr
            v-for="item in score"
            :key="item.id"
            :class="{'table-primary':(item.value==maxValue)}"
          >
            <td>{{item.type}}</td>
            <td>{{item.value}}</td>
          </tr>
        </tbody>
      </table>
      <!-- <p style="color:lightgrey;font-size:0.8em">成都终端管制室 创新工作室 2021</p> -->
    </div>
    <!-- belbin description -->
    <div class="card">
      <div class="card-body">
        <p
          v-for="line in description"
          :key="line.id"
          :class="{'card-title description-title':(line.type=='title'),'card-text description-plain':(line.type=='plain')}"
        >{{line.text}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FinalView",
  data() {
    return {
      //
      score: [],
      maxValue: 0
    };
  },
  computed: {
    devMode() {
      return this.$store.state.devMode;
    },
    description() {
      return this.$store.state.description;
    },
    cell() {
      return this.$store.state.hollandData.scoreData.values;
    },
    asix_x() {
      return this.$store.state.hollandData.baseData.brief.types;
    },
    asix_y() {
      return this.$store.state.hollandData.baseData.brief.parts;
    },
    content() {
      return this.calc();
    }
  },
  methods: {
    //
    initValue() {
      this.score = [];
      for (let i = 0; i < this.$store.state.baseData[0].options.length; i++) {
        this.score.push({
          type: this.$store.state.baseData[0].options[i].type,
          value: 0
        });
      }
    },
    calcValue() {
      for (let i = 0; i < this.score.length; i++) {
        for (let j = 0; j < this.$store.state.scoreData.length; j++) {
          for (let k = 0; k < this.$store.state.scoreData[j].length; k++) {
            if (this.score[i].type == this.$store.state.scoreData[j][k].type) {
              this.score[i].value += this.$store.state.scoreData[j][k].value;
            }
          }
        }
        if (this.maxValue < this.score[i].value) {
          this.maxValue = this.score[i].value;
        }
      }
    },
    commitScore() {
      this.$store.commit("setValueBelbin", this.score);
    },
    goNext() {
      this.$store.commit("routerNext");
      this.$router.push(this.$store.state.routerData.nextView);
      if (this.devMode) {
        window.console.log(this.$store.state.routerData.nextView);
      }
    },
    calc() {
      window.console.log("calc()");
      let arr = [];
      for (let i = 0; i < this.asix_y.length; i++) {
        let subarr = [];
        for (let j = 0; j < this.asix_x.length; j++) {
          let value = 0;
          for (let k = 0; k < this.cell.length; k++) {
            if (
              this.cell[k].t == this.asix_x[j].letter &&
              this.cell[k].p == this.asix_y[i].index
            ) {
              value += this.cell[k].v;
            }
          }
          subarr.push(value);
        }
        arr.push(subarr);
      }
      let subarr = [];
      for (let i = 0; i < arr[0].length; i++) {
        let value = 0;
        for (let j = 0; j < arr.length; j++) {
          value += arr[j][i];
        }
        subarr.push(value);
      }
      arr.push(subarr);
      if (this.devMode) {
        window.console.clear();
        window.console.log(JSON.stringify(arr));
      }
      return arr;
    }
  },
  mounted() {
    //
    this.initValue();
    this.calcValue();
    this.commitScore();
    if (this.devMode) {
      window.console.clear();
      window.console.log(JSON.stringify(this.$store.state.belbinScore));
    }
  }
};
</script>

<style scoped>
</style>